<template>
  <div class="app-container" >
    <div class="top-main">
    <el-form  class="top-form-fl" :model="param" label-width="auto" :inline="true"> 
      <el-form-item label="购箱城市">
        <city-select :selectCity="param.boxStartCity" @cityId="startCityId" clearable style="width: 100%;"></city-select>
      </el-form-item>
      <el-form-item label="箱型">
        <el-select v-model="param.boxType" style="width:100%" clearable placeholder="选择箱型">
          <el-option v-for="item in param.boxTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="箱况">
        <el-select v-model="param.boxCondition" style="width:100%" clearable placeholder="选择箱况">
          <el-option v-for="item in param.boxConditionOptions" :key="item.value" :label="item.label"
            :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="卖箱家" prop="companyName">
        <el-input v-model.trim="param.companyName" clearable placeholder="请输入卖箱家名称"/>
      </el-form-item>
      <el-form-item label="出售编号" prop="boxReleaseNo">
        <el-input v-model.trim="param.boxReleaseNo" clearable placeholder="请输入出售编号"/>
      </el-form-item>
    </el-form>
    <div class="top-from-fr">
        <el-button class="top-Search" @click="getTableData" type="primary">搜索</el-button>
        <el-button class="top-Refresh" @click="handleReSet">重置</el-button>
      </div>   
    </div>
    
    <cardBuyBox :data="table.data" :config="table.config" @pageChange="onTablePageChange"  @handleXiaDan="handleXiaDan" @handleChakan="handleChakan"></cardBuyBox>
  </div>
</template>

<script setup lang="ts">
import cardBuyBox from '@/components/cardBuyBox'
// import czTages from '@/components/chengzhiTags'
import citySelect from '@/components/citySelect'
// import { boxEastAgentPage, downPitch, deletePitch, publishPitch } from '@/api/boxRent'
import { wantBuySelectSaleBoxPage } from '@/api/boxDeal/boxSeel'
import orderInfo from '@/store/modules/order'

import { computed, onActivated, onMounted, reactive, ref } from 'vue';
import {Plus,Delete,Promotion,Edit, Message,Download,Upload} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const param = reactive({
  loading: false,
  pageNum: 1,
  pageSize: 10,
  dialogVisible: false,
  stateFilter: { 5: '出租中', 10: '仓库中', 15: '待发布' },
  stateColor: { 5: '#22A86D', 10: '#2158F3', 15: '#2158F3' },
  boxTypeOptions: [ // 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP
    { value: '5', label: '40HQ', },
    { value: '10', label: '40GP', },
    { value: '15', label: '20HQ', },
    { value: '20', label: '20GP', },
  ],
  boxConditionOptions: [ //5-全新   10-次新  15-适货 20-混提(次新或者适货)
    { value: '15', label: '适货', },
    { value: '10', label: '次新', },
    { value: '5', label: '全新', },

    // { value: '20', label: '混提 ', },
  ],
  beginTotalRentQty: '',
  endTotalRentQty: '',
  boxBackCity: '',
  boxStartCity: '',
  companyName:'',
  startCityOptions: [],
  backCityOptions: [],
  boxReleaseNo: '',
  typeList: []
});


const table = reactive({
  data: [],
  config: {
    isSelection: true,
    isList: false,
    isPagination: true, // 是否分页
    total: 0, // 分页总数
    loading: false
  }
});

const startCityId = (id: string) => {
  param.boxStartCity = id
}


// 过滤条件：
// 累计量区间:beginTotalRentQty endTotalRentQty 箱型:boxType 5 - 40HQ   10 - 40GP  15 - 20HQ   20 - 20GP 
// # 箱况:boxCondition 5 - 全新   10 - 次新  15 - 适货 20 - 混提(次新或者适货)
// # 提箱城市Id: carryCityId
function getTableData() {
  let data = {
    pageNum: param.pageNum,
    pageSize: param.pageSize,
    carryCityId: param.boxStartCity || null,
    companyName:param.companyName|| null,
    // returnCityId: param.boxBackCity || null,
    boxType: param.boxType,
    boxCondition: param.boxCondition,
    releaseNo: param.boxReleaseNo?.toUpperCase()
    // beginTotalRentQty: param.beginTotalRentQty - 0 || "",
    // endTotalRentQty: param.endTotalRentQty - 0 || "",
    // status: param.status,
  };
  table.config.loading = true;
  // 列表
  wantBuySelectSaleBoxPage(data).then((res: any) => {
    table.data = JSON.parse(JSON.stringify(res.data.list));
    table.data.forEach((item: any) => {
      let mainFileList = JSON.parse(item.mainFileList);
      item.imgUrl = mainFileList.map((item: any) => {
        return item.url
      })[0];
    });
    table.config.total = res.data.total;
  });

  table.config.loading = false;
}

//重置
const handleReSet = () => {
  param.boxType = null
  param.boxCondition = null
  param.boxStartCity = null
  param.boxReleaseNo = null
  param.companyName = null
  getTableData()
};

const router = useRouter();
//下单
const handleXiaDan = (row: any) => {
   router.push({
    path: 'tradeOrder',
    query: { 
      boxId: row.releaseSaleId,
      boxType:row.boxType,
      boxCondition:row.boxCondition
    }
  })
};

//查看
const handleChakan = (row: any) => {
  router.push({
    path: 'detaisInfo',
    query: { 
      boxId: row.releaseSaleId,
    }
  })

};
//上架/下架  
const tableRef = ref({ multipleSelection: [] })
const selection = computed(() => {
  let ids: any[] = []
  tableRef.value.multipleSelection.map((item: any) => {
    ids.push(item.id)
  })
  return ids
})



const clickJump = (row: any) => {
  orderInfo().setRowData(row)
  router.push({
    path: 'agentBuyBoxInfo',
    query: { releaseSaleId: row.releaseSaleId,id:row.id }
  })
}
//分页
function onTablePageChange(page: { pageNum: number; pageSize: number }) {
  param.pageNum = page.pageNum;
  param.pageSize = page.pageSize;
  getTableData();
};


// 分页数量
const onHandleSizeChange = (val: number) => {
   param.pageSize = val;
  if(param.pageNum!=1){
    param.pageNum =1
  }else{
     getTableData()
  }
};
// 分页页码
const onHandleCurrentChange = (val: number) => {
  param.pageNum = val;
  getTableData()
};


onActivated(() => {
  getTableData()
})

</script>